<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>魔方</title>
		<!-- 内部选择器 -->
		<style>
			/* 通用选择器：通用效果 盒模型：内外边距 */
			*{
				/* 边距为0，防止位置偏差 */
			margin: 0;
			padding: 0;
			
			}
			/* 容器：看3D视觉效果--宽高，居中，视觉属性 */
			.container{
				width: 200px;
				height: 200px;
				margin: 200px auto;
				/* 视觉属性：数值px：拉开距离显示更真实的3D效果 */
				perspective:3000px ;
				/* 查看容器是否引入 */
				bo rder: 1px solid red;
	
			}
			
			/* 魔方整体：宽高，指定3D坐标轴【3D效果图层】 */
			.box{
				width: 200px;
				height: 200px;
				/* 建系 */
				transform-style: preserve-3d;
				transform: rotateX(45deg) rotateY(45deg);
			      animation: mofang 2s linear infinite;
			}
			@keyframes mofang{
				
				0%{
					transform: rotateX(45deg) rotateY(45deg);
				}
					2%{
						transform: rotateX(180deg) rotateY(180deg);
						
					}
						3%{
							transform: rotateX(360deg) rotateY(360deg);
						}
			}
			/* 六个面 */
			.page{
				width: 200px;
				height: 200px;
				position: absolute;
				
			
			}
			.page_top{
				background: url("img/bg.jpg");
				transform: translateZ(100px);
				background-size: 100% 100%;
			}
			.page_bottom{
				background: url("img/dingzhen.jpg");
				transform: translateZ(-100px);
				background-size: 100% 100%;
			}
			.page_left{
				background: url("img/wogua.jpg");
				transform: translateX(-100px) rotateY(90deg);
				background-size: 100% 100%;
			}
			.page_right{
				background:url("img/xitele.jpg") ;
				transform: translateX(100px) rotateY(90deg) ;
			background-size: 100% 100%;
			}
			.page_before{
				background:url("img/lun.jpg");
				transform: translateY(100px) rotateX(90deg);
				background-size: 100% 100%;
				
			}
			.page_after{
				background:url("img/san.jpg");
				transform: translateY(-100px) rotateX(90deg);
			background-size: 100% 100%;
			}
			
		</style>
	</head>
	<body>
		<!-- 3D魔方：1.3D容器————显示3D效果 2.模仿整体 3.六个面 -->
		<div class="container">
			<div class="box">
				<div class="page page_top"></div>
				<div class="page page_bottom"></div> 
				<div class="page page_left"></div>
				<div class="page page_right"></div>
				<div class="page page_before"></div>
				<div class="page page_after"></div>
				
			</div>
		</div>
		<audio src="img/juren.mp3" autoplay  loop></audio>
	</body>
</html>